<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>

    <base href="http://localhost:81/resources/front/">

    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/shopping-mall-index.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/zhonglin.js"></script>
    <script type="text/javascript" src="http://localhost:81/resources/back/lib/layer/1.9.3/layer.js"></script>

    <!--封装ajax请求-->
    <script src="http://localhost:81/resources/back/js/AjaxUtlis.js" type="text/javascript" charset="utf-8"></script>
    <!--展示登录用户信息-->
    <script type="text/javascript" src="js/shopTitle.js"></script>

    <!--全选全不选-->
    <script>
        $(function () {
            // 1.给全选的框加一个改变事件
            $("#selectAll").change(function () {
                // 2.获取当前元素的状态
                var result = $(this).prop("checked");
                // 3.获取商铺和商品的checkbox,根据全选的状态改变
                $(".store").each(function () {
                    $(this).prop("checked",result);
                });
                changeGoods();
            });

            // 选择商铺时，全选商铺下的商品
            $(".storename").change(function () {
                var flag = $(this).prop("checked");
                var sid = $(this).val();
                // 获取当前商铺下面的商品的checkbox
                $(".sid-" + sid).each(function () {
                    $(this).prop("checked", flag);
                });
                changeGoods()
            })
        })

    </script>

    <!--商品数量进行动态加减,删除购物车中的商品-->
    <script>

        <!--商品数量进行动态加减-->
        function updateCar(sid,gid, status) {
            var param = new Object();
            param.gid = gid;
            param.sid = sid;
            param.status = status; // add(+),sub(-)
            post("shopcar/updateCarCount", param, function (resp) {
                location.reload();
            });
        }

        <!--将商品传入后台进行动态加减-->
        function changeGoods() {
            // 创建一个数组原来存商品id
            var array = new Array();
            $(".info-mid .store:checked").each(function () {
                array.push($(this).attr("key")); // 商品ID
            });
            // 把购物勾选的商品发到后台做计算()
            post("shopcar/carSelectGoods", array, function (resp) {
                console.log(resp);
                $("#user_totalPrice").text(resp.totalPrice);
            });

            $("#user_car_select").text(array.length);
            
        }

        <!--删除购物车中的商品-->
        function delCar(sid,gid) {
            layer.confirm('确定删除该宝贝', {icon: 5, title:'如果误点请取消'}, function(index){
                //do something
                get("shopcar/delCar/" + sid+"/"+gid, function (resp) {
                    if (resp.code == 0) {
                        layer.msg('删除成功！', {icon: 1, time: 1500},function () {
                            // 商品添加成功就刷新页面
                            location.reload();
                        });
                    }
                });

                layer.close(index);
            });
        }
    </script>

    <!--跳转到订单页面-->
    <script>
        function goPay() {
            // 1.创建一个数组，用来存用户勾选的商品
            var array = new Array()

            // 2.获取用户勾选的视频
            $(".info-mid .store:checked").each(function () {

                // 添加到数组中
                array.push($(this).attr("key")); // 商品ID
            });

            // 3.判断用户是否勾选了商品
            if (array.length == 0) {
                layer.alert("您至少选择一件商品", {icon: 3});
                return;
            }
            // 5.跳转到结算页面
            location.href="http://localhost:81/order/toOrderPay?key="+array;
        }
    </script>

</head>
<body style="position:relative;">
<!--top 开始-->
<div class="top">
    <div class="top-con w1200" id="shopTitle">
    </div>
</div>

<!--logo search 开始-->
<div class="hd-info1 w1200">
    <div class="logo f-l">
        <h1><a href="#" title="中林网站"><img src="images/logo.jpg" /></a></h1>
    </div>
    <div class="search f-r">
        <ul class="sp">
            <li class="current" ss-search="sp"><a href="JavaScript:;">商品</a></li>
            <li ss-search="dp"><a href="JavaScript:;">店铺</a></li>
            <div style="clear:both;"></div>
        </ul>
        <div class="srh">
            <div class="ipt f-l">
                <input type="text" placeholder="搜索商品..." ss-search-show="sp" />
                <input type="text" placeholder="搜索店铺..." ss-search-show="dp" style="display:none;" />
            </div>
            <button class="f-r">搜 索</button>
            <div style="clear:both;"></div>
        </div>
        <ul class="sp2">
            <li><a href="#">绿豆</a></li>
            <li><a href="#">大米</a></li>
            <li><a href="#">驱蚊</a></li>
            <li><a href="#">洗面奶</a></li>
            <li><a href="#">格力空调</a></li>
            <li><a href="#">洗发护发</a></li>
            <li><a href="#">葡萄 </a></li>
            <li><a href="#">脉动</a></li>
            <li><a href="#">海鲜水产</a></li>
            <div style="clear:both;"></div>
        </ul>
    </div>
    <div style="clear:both;"></div>
</div>

<!--切换城市-->
<div class="switch-city w1200">
    <a href="#" class="dianji-qh">切换城市</a>
    <span class="dqm">重庆市</span>
    <div class="select-city">
        <div class="sl-city-top">
            <p class="f-l">切换城市</p>
            <a class="close-select-city f-r" href="#">
                <img src="images/close-select-city.gif" />
            </a>
        </div>
        <div class="sl-city-con">
            <p>西北</p>
            <dl>
                <dt>重庆市</dt>
                <dd>
                    <a href="#">长寿区</a>
                    <a href="#">巴南区</a>
                    <a href="#">南岸区</a>
                    <a href="#">九龙坡区</a>
                    <a href="#">沙坪坝区</a>
                    <a href="#">北碚</a>
                    <a href="#">江北区</a>
                    <a href="#">渝北区</a>
                    <a href="#">大渡口区</a>
                    <a href="#">渝中区</a>
                    <a href="#">万州</a>
                    <a href="#">武隆</a>
                    <a href="#">晏家</a>
                    <a href="#">长寿湖</a>
                    <a href="#">云集</a>
                    <a href="#">华中</a>
                    <a href="#">林封</a>
                    <a href="#">双龙</a>
                    <a href="#">石回</a>
                    <a href="#">龙凤呈祥</a>
                    <a href="#">朝天门</a>
                    <a href="#">中华</a>
                    <a href="#">玉溪</a>
                    <a href="#">云烟</a>
                    <a href="#">红塔山</a>
                    <a href="#">真龙</a>
                    <a href="#">天子</a>
                    <a href="#">娇子</a>
                </dd>
                <div style="clear:both;"></div>
            </dl>
            <dl>
                <dt>新疆</dt>
                <dd>
                    <a href="#">齐乌鲁木</a>
                    <a href="#">昌吉</a>
                    <a href="#">巴音</a>
                    <a href="#">郭楞</a>
                    <a href="#">伊犁</a>
                    <a href="#">阿克苏</a>
                    <a href="#">喀什</a>
                    <a href="#">哈密</a>
                    <a href="#">克拉玛依</a>
                    <a href="#">博尔塔拉</a>
                    <a href="#">吐鲁番</a>
                    <a href="#">和田</a>
                    <a href="#">石河子</a>
                    <a href="#">克孜勒苏</a>
                    <a href="#">阿拉尔</a>
                    <a href="#">五家渠</a>
                    <a href="#">图木舒克</a>
                    <a href="#">库尔勒</a>
                </dd>
                <div style="clear:both;"></div>
            </dl>
            <dl>
                <dt>甘肃</dt>
                <dd>
                    <a href="#">兰州</a>
                    <a href="#">天水</a>
                    <a href="#">巴音</a>
                    <a href="#">白银</a>
                    <a href="#">庆阳</a>
                    <a href="#">平凉</a>
                    <a href="#">酒泉</a>
                    <a href="#">张掖</a>
                    <a href="#">武威</a>
                    <a href="#">定西</a>
                    <a href="#">金昌</a>
                    <a href="#">陇南</a>
                    <a href="#">临夏</a>
                    <a href="#">嘉峪关</a>
                    <a href="#">甘南</a>
                </dd>
                <div style="clear:both;"></div>
            </dl>
            <dl>
                <dt>宁夏</dt>
                <dd>
                    <a href="#">银川</a>
                    <a href="#">吴忠</a>
                    <a href="#">石嘴山</a>
                    <a href="#">中卫</a>
                    <a href="#">固原</a>
                </dd>
                <div style="clear:both;"></div>
            </dl>
            <dl>
                <dt>青海</dt>
                <dd>
                    <a href="#">西宁</a>
                    <a href="#">海西</a>
                    <a href="#">海北</a>
                    <a href="#">果洛</a>
                    <a href="#">海东</a>
                    <a href="#">黄南</a>
                    <a href="#">玉树</a>
                    <a href="#">海南</a>
                </dd>
                <div style="clear:both;"></div>
            </dl>
        </div>
    </div>
</div>

<!--内容开始-->
<div class="cart-content w1200">
    <ul class="cart-tit-nav">
        <li class="current"><a href="#" th:text="|全部商品:${userCarVo.size}|"></a></li>
        <li><a href="#">降价商品 1</a></li>
        <li><a href="#">进口商品 1</a></li>
        <div style="clear:both;"></div>
    </ul>
    <!--全选-->
    <div class="cart-con-tit">
        <p class="p1">
            <input type="checkbox" id="selectAll" name="hobby"></input>
            <span>全选</span>
        </p>
        <p class="p2">商品信息</p>
        <p class="p4" style="padding-left: 70px">数量</p>
        <p class="p5" style="padding-left: 15px">单价（元）</p>
        <p class="p6" style="width: 200px;padding-left: 50px">金额（元）</p>
        <p class="p7">操作</p>
    </div>
    <div class="cart-con-info" th:each="userCarVo:${userCarVo.storeCarVoList}">
        <!--店铺名字-->
        <div class="info-top">
            <input type="checkbox" class="store storename" name="hobby" th:value="${userCarVo.storeVo.id}"></input>
            <span th:text="${userCarVo.storeVo.shopName}">商家：向东服饰专卖店</span>
        </div>
        <!--该店铺下的所有商品-->
        <div class="info-mid" id="flash" style="left: 50px;position: relative;" th:each="car:${userCarVo.carVoList}">
            <input type="checkbox" th:attr="key=|${userCarVo.storeVo.id}:${car.goodsVo.id}|"
                   value="" name="hobby" th:class="|mid-ipt f-l sid-${userCarVo.storeVo.id} store|" onchange="changeGoods()"></input>
            <div class="mid-tu f-l">
                <a href="#"><img width="80" height="80" th:src="${car.goodsVo.goodsPngList[0].url}"/></a>
            </div>
            <div class="mid-font f-l" style="width: 240px;">
                <a href="#" th:text="${car.goodsVo.gname}"></a>
                <span>满赠</span>
            </div>

            <!--商品数量动态加减-->
            <div class="mid-sl f-l" style="width: 130px;margin-top: 24px">
                <a href="JavaScript:;" class="sl-left" th:onclick="|updateCar(${userCarVo.StoreVo.id},${car.gid},'sub')|">-</a>
                <input type="text" id="goodsCount" value="1" th:value="${car.count}"/>
                <a href="JavaScript:;" class="sl-right" th:onclick="|updateCar(${userCarVo.StoreVo.id},${car.gid},'add')|">+</a>
            </div>


            <p style="width: 100px;margin-top: 30px" class="mid-dj f-l" th:text="|¥ ${car.goodsVo.gprice}|"></p>
            <p style="width: 100px;margin-top: 30px;margin-right: 90px" class="mid-je f-l" th:text="|¥ ${car.totalPrices}|"></p>
            <div class="mid-chaozuo f-l" style="margin-top: 15px">
                <a href="#">移入收藏夹</a>
                <a href="javascript:void(0)" th:onclick="|delCar(${userCarVo.storeVo.id},${car.gid})|">删除</a>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>

    <div class="cart-con-info">
        <div class="info-tijiao">
            <p class="p1">
                已选择<span style="color: red;" id="user_car_select" >0</span>件商品
                实付款：¥ <span id="user_totalPrice" >0.0</span>
            </p>
            <button class="btn" onclick="goPay()">去结算</button>
        </div>
    </div>
</div>
</div>

<!--底部服务-->
<div class="ft-service">
    <div class="w1200">
        <div class="sv-con-l2 f-l">
            <dl>
                <dt><a href="#">新手上路</a></dt>
                <dd>
                    <a href="#">购物流程</a>
                    <a href="#">在线支付</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">配送方式</a></dt>
                <dd>
                    <a href="#">货到付款区域</a>
                    <a href="#">配送费标准</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">购物指南</a></dt>
                <dd>
                    <a href="#">常见问题</a>
                    <a href="#">订购流程</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">售后服务</a></dt>
                <dd>
                    <a href="#">售后服务保障</a>
                    <a href="#">退款说明</a>
                    <a href="#">新手选购商品总则</a>
                </dd>
            </dl>
            <dl>
                <dt><a href="#">关于我们</a></dt>
                <dd>
                    <a href="#">投诉与建议</a>
                </dd>
            </dl>
            <div style="clear:both;"></div>
        </div>
        <div class="sv-con-r2 f-r">
            <p class="sv-r-tle">187-8660-5539</p>
            <p>周一至周五9:00-17:30</p>
            <p>（仅收市话费）</p>
            <a href="#" class="zxkf">24小时在线客服</a>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

<!--底部 版权-->
<div class="footer w1200">
    <p>
        <a href="#">关于我们</a><span>|</span>
        <a href="#">友情链接</a><span>|</span>
        <a href="#">宅客微购社区</a><span>|</span>
        <a href="#">诚征英才</a><span>|</span>
        <a href="#">商家登录</a><span>|</span>
        <a href="#">供应商登录</a><span>|</span>
        <a href="#">热门搜索</a><span>|</span>
        <a href="#">宅客微购新品</a><span>|</span>
        <a href="#">开放平台</a>
    </p>
    <p>
        沪ICP备13044278号<span>|</span>合字B1.B2-20130004<span>|</span>营业执照<span>|</span>互联网药品信息服务资格证<span>|</span>互联网药品交易服务资格证
    </p>
</div>
</body>
</html>